<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '../stores/auth';

const authStore = useAuthStore();
const email = ref('');
const password = ref('');
const error = ref('');

const handleLogin = () => {
  if (authStore.login(email.value, password.value)) {
    error.value = '';
  } else {
    error.value = '邮箱或密码错误';
  }
};
</script>

<template>
  <div class="min-h-screen flex items-center justify-center bg-black px-4">
    <div class="max-w-md w-full space-y-8">
      <div class="text-center">
        <h2 class="mt-6 text-4xl font-bold text-white">我的相册</h2>
        <p class="mt-2 text-sm text-gray-400">登录以查看您的照片集</p>
      </div>
      
      <div class="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-8">
        <form class="space-y-6" @submit.prevent="handleLogin">
          <div>
            <label for="email" class="block text-sm font-medium text-gray-300">
              邮箱地址
            </label>
            <div class="mt-1">
              <input
                id="email"
                v-model="email"
                type="email"
                required
                class="appearance-none block w-full px-3 py-2 border border-white/10 rounded-lg bg-white/5 placeholder-gray-500 text-white focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-transparent"
                placeholder="请输入邮箱"
              />
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-300">
              密码
            </label>
            <div class="mt-1">
              <input
                id="password"
                v-model="password"
                type="password"
                required
                class="appearance-none block w-full px-3 py-2 border border-white/10 rounded-lg bg-white/5 placeholder-gray-500 text-white focus:outline-none focus:ring-2 focus:ring-white/20 focus:border-transparent"
                placeholder="请输入密码"
              />
            </div>
          </div>

          <div v-if="error" class="text-red-400 text-sm text-center">
            {{ error }}
          </div>

          <button
            type="submit"
            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          >
            登录
          </button>
        </form>
      </div>
    </div>
  </div>
</template>